<template>
	<view class="container">
		<view class="form">
			<u-form :model="form" ref="uForm" :label-style="labelStyle" label-width="200rpx">
				<u-form-item label="违规类型">
					<picker mode="selector" :range="typeList" range-key="type_name" style="width: 100%;height: 70rpx;" @change="pickerChange">
						<view class="form-right">{{ typeIndex >= 0 ? typeList[typeIndex].type_name : '请选择违规类型' }}</view>
					</picker>
				</u-form-item>
				<u-form-item label="投诉内容" label-position="top"><textarea v-model="form.content" placeholder="请输入投诉内容" class="content-textarea" placeholder-class="content-textarea-placeholder" :auto-height="true" /></u-form-item>
			</u-form>
		</view>
		<view class="report-btn" @tap="submit">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				content: ''
			},
			labelStyle: {
				paddingLeft: '30rpx',
				fontSize: '32rpx'
			},
			typeList: [],
			typeIndex: -1,
			options: {},
			disable: false
		};
	},
	onLoad(options) {
		this.options = options;
		this.$u.api.getComplaintParam(this.options.type).then(res => {
			uni.setNavigationBarTitle({
				title: res.data.name
			});
			this.typeList = res.data.type_list;
		});
	},
	methods: {
		pickerChange(e) {
			this.typeIndex = e.detail.value;
		},
		submit() {
			if (this.typeIndex >= 0 && this.form.content && !this.disable) {
				this.disable = true;
				this.$u.api
					.submitComplaintParam(this.typeList[this.typeIndex].type_id, this.form.content, this.options.id)
					.then(res => {
						uni.showModal({
							title: '投诉提交成功',
							content: '我们会认证核查投诉内容，并做出相应处理办法，谢谢关注',
							success: res => {
								this.navigateBack();
							}
						});
					})
					.catch(e => {
						this.disable = false;
					});
			}
		}
	}
};
</script>

<style lang="scss">
.container {
}
.content-textarea {
	padding: 10rpx 30rpx;
	width: 750rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	min-height: 300rpx;
}
.content-textarea-placeholder {
	color: #aaa;
}
.form {
	margin-top: 20rpx;
	background: #fff;
}
.form-right {
	width: 100%;
	padding-right: 30rpx;
	line-height: 70rpx;
	text-align: right;
	@include ellipsis(1);
}
.report-btn {
	width: 600rpx;
	margin: 50rpx auto 0;
	height: 88rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $theme-main-color;
	color: #fff;
	border-radius: 8rpx;
}
</style>
